﻿
@{
    ViewBag.Title = "基站信息";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
<link rel="stylesheet" href="~/Content/css/easyui.css" />
<link rel="stylesheet" href="~/Content/css/dropload.css">
<script src="~/Content/script/swiper.min.js"></script>
<script src="~/Content/script/Uitls.js"></script>
<script src="~/Content/script/jquery.easyui.min.js"></script>
<script src="~/Content/script/dropload.min.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        position: relative;
        height: 100%;
    }

    li, a {
        list-style: none;
        text-decoration: none;
    }

    .swiper-container {
        width: 100%;
    }

    #nav {
        background: #fff;
    }

        #nav .swiper-wrapper {
            height: 1.68rem;
            box-sizing: border-box;
            margin: 0;
            line-height: 1.6rem;
            border-bottom: 2px solid #dfe0e1;
        }

        #nav li {
            text-align: center;
            color: #424242;
            font-size: 0.63rem;
        }

            #nav li span {
                color: #3597D9;
            }

        #nav .active-nav {
            color: #2ECA70;
            border-bottom: 2px solid #2ECA70;
        }

            #nav .active-nav span {
                color: #2ECA70;
            }

    #tableHeader {
        height: 40px;
    }

        #tableHeader table {
            width: 100%;
            height: 40px;
            color: #fff;
            font-size: 15px;
        }

            #tableHeader table th:nth-child(even) {
                background: #4FC2A1;
            }

            #tableHeader table th:nth-child(odd) {
                background: #334960;
            }

    #page {
        position: absolute;
        top: 4rem;
        left: 0;
        right: 0;
        bottom: 2.4rem;
        overflow: hidden;
    }

        #page .swiper-slide {
            text-align: center;
            font-size: 30px;
            overflow-y: scroll;
            position: relative;
        }

        /*.dropload-down {
        display: none;
    }*/

        #page table {
            background: #fff;
        }

        #page .swiper-slide table {
            width: 100%;
        }

        #page table tr:nth-child(even) {
            background: #F8F8F8;
        }

        #page tr td {
            font-size: 0.5rem;
            color: #000;
            padding: 0.3rem 0;
            font-family: "微软雅黑";
            border-left: 1px solid #dedede;
            word-break: break-all;
        }

            #page tr td:nth-child(1) {
                width: 20%;
            }

            #page tr td:nth-child(4) {
                width: 25%;
            }

            #page tr td:nth-child(2) {
                width: 30%;
            }

            #page tr td:nth-child(3) {
                width: 10%;
            }

            #page tr td:nth-child(5) {
                width: 8%;
            }

    #seacher {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        background: #E9EDF0;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #seacher input {
            margin-right: 10px;
            width: 80%;
            background: #fff;
            border: none;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            padding: 0 10px;
            text-align: center;
            font-size: 0.6rem;
            height: 1.32rem;
        }

        #seacher button {
            width: 20%;
            border-radius: 4.96px;
            border: none;
            background: #2ECA70;
            color: #fff;
            outline: none;
            line-height: 1.32rem;
            font-size: 0.6rem;
            height: 1.32rem;
        }

            #seacher button img {
                width: 0.7rem;
                vertical-align: text-top;
                display: inline;
            }

    #timeRadio {
        display: flex;
        padding: 2px 6px;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #timeRadio .ui-radio {
            margin-right: 0.72rem;
            line-height: 1.32rem;
            font-size: 0.65rem;
            color: #424242;
            font-weight: bold;
        }

            #timeRadio .ui-radio input {
                width: 1rem;
                height: 1rem;
                top: -0.1rem;
                margin-right: 0.1rem;
            }

                #timeRadio .ui-radio input:before {
                    width: 0.9rem;
                    height: 0.9rem;
                    background: #fff;
                    left: 0.05rem;
                    top: 0.05rem;
                    border-radius: 0.5rem;
                }

                #timeRadio .ui-radio input:checked:after {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #2ECA70;
                    border: 1px solid #2ECA70;
                    border-radius: 0.4rem;
                    left: 0.25rem;
                    top: 0.25rem;
                }

    #footer {
        /*position: absolute;
            height: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
            background-color: #00bcd4;*/
        position: absolute;
        height: 1.6rem;
        left: 0;
        right: 0;
        bottom: 2rem;
        padding: 0;
        margin: 0;
        background-color: #00bcd4;
        z-index: 999;
    }

        #footer .ui-btn-primary {
            height: 1.6rem;
            width: 100%;
            line-height: 1.6rem;
            font-size: 0.68rem;
        }
</style>
@*</head>
    <body>*@
@*<div id="seacher">
        <input id="Msg" type="text" placeholder="请输入油机编号查询">
        <button id="Search"><img src="~/Content/image/search (1).png" alt="Alternate Text" />&nbsp;搜索</button>
    </div>*@
<div id="seacher">
    <input id="cAreaName" name="cAreaName" class="easyui-combotree" data-options="panelHeight:'auto',panelMaxHeight:'250px'" style="width:250px;height:22px;">
    <input id="BaseStationName" type="text" placeholder="基站名称">
    <button id="Search">搜索</button>
</div>
<div id="tableHeader">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <th style="text-align:center;width:20%">区域</th>
            <th style="text-align:center;width:30%">基站名称</th>
            <th style="text-align:center;width:10%">基站级别</th>
            <th style="text-align:center;width:25%">运营商</th>
            <th style="text-align:center;width:8%">详情</th>
        </tr>
    </table>
</div>
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage">
            @*退服*@
            <table cellpadding="0" cellspacing="0" id="BaseStationList" class="list">
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>
                <tr>
                    <td>红花岗区</td>
                    <td>2HH-文兴山版小村委会</td>
                    <td>普通</td>
                    <td>移动、联通、电信</td>
                    <td><a>>></a></td>
                </tr>


            </table>
        </div>
    </div>
</div>
<script>
    bindAreaTree('#cAreaName', true);//初始化区域选择器
    $("#BaseStationList").html('');

    var pageIndex = 1;//页码
    var pageSize = 50;//数目
    var dropload;
    var AreaCode = "";
    var pageStr = "";
    (function (designWidth, maxWidth) {
        var html = document.getElementsByTagName("html")[0];
        var tid;
        function refreshRem() {
            var width = html.getBoundingClientRect().width;
            console.log(width / 15)
            html.style.fontSize = width / 15 + "px"
        }
        window.addEventListener("resize", function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
        refreshRem();
    })();

    //工单状态tap点击事件
    (function (doc, win) {
        var size = 10;
        var myNav = new Swiper('#nav', {
            spaceBetween: 10,
            slidesPerView: 4,
            watchSlidesProgress: true,
            watchSlidesVisibility: true,
            on: {
                tap: function () {
                    menuIndex = myNav.clickedIndex;
                    myPage.slideTo(myNav.clickedIndex);
                }
            }
        });

        //搜索
        $("#Search").click(function () {
            AreaCode = $('#cAreaName').combotree("getValue");//区域AreaCode
            pageStr = $("#BaseStationName").val().trim();//搜索框
            pageIndex = 1;
            $(".dropload-down").remove();
            $("#BaseStationList").empty();
            dropload = undefined;
            getBaseStationList();
        })
        //工单状态滑动方法
        function updateNavPosition() {
            $('#nav .active-nav').removeClass('active-nav');
            var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
            menuIndex = activeNav.index();
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() >= myNav.activeIndex) {
                    var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                    myNav.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    myNav.slideTo(activeNav.index())
                }
            }
        }

    })(document, window);






    //数据分页加载函数
    function getBaseStationList() {
        if (dropload !== undefined) {
            console.log("dropload---", dropload)
            if (!dropload.isData) {
                dropload.noData(false)
                dropload.unlock()
            }
            dropload.resetload();
        } else {

            dropload = $(".slidepage").dropload({
                //scrollArea: $('.slidepage').eq(menuIndex),
                scrollArea: $(".slidepage"),
                domUp: {
                    domClass: 'dropload-up',
                    domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                    domUpdate: '<div class="dropload-update">↑释放更新</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
                },
                loadDownFn: function (me) {
                    $.ajax({
                        url: '/api/info/GetBaseStationList',
                        type: 'get',
                        data: { AreaCode: AreaCode, pageIndex: pageIndex, pageSize: pageSize, pageStr: pageStr },
                        //error: function (data) {
                        //    console.log(JSON.stringify(data));
                        //},
                        success: function (data) {
                            //var result = JSON.parse(data);
                            var result = eval(data.Data);
                            console.log(result)
                            var datalist = '';
                            if (result.Code != 0 && result.Result.length != 0) {
                                result.Result.forEach(function (d, i) {
                                    datalist += "<tr><td>" + d.AreaName + "</td><td>" + d.BaseStationName + "</td><td>" + d.BaseStationLevel + "</td><td>" + d.BaseStationType + "</td><td><a href='/BaseStation/Detail?BaseStationCode=" + d.BaseStationCode + "'>>></a></td></tr>"
                                });
                                // 如果没有数据
                            } else {
                                // 锁定
                                me.lock();
                                // 无数据
                                me.noData();
                            }
                            //setTimeout(function () {
                            // 插入数据到页面，放到最后面
                            $("#BaseStationList").append(datalist);
                            pageIndex++;
                            datalist = '';
                            // 每次数据插入，必须重置
                            me.resetload();
                            //}, 1000);
                        },
                        error: function (xhr, type) {
                            // 即使加载出错，也得重置
                            me.resetload();
                        }
                    })
                },
                threshold: 50
            });

            console.log(dropload);
        }
    }


    getBaseStationList(); //初始化


    function TreeData() {
        $.ajax({
            url: '/api/Info/GetAreas',
            type: 'get',
            success: function (data) {
                var result = eval(data.Data);
                //var result = eval(data);
                toTreeData(result, "AreaCode", "ParentCode", "AreaName");

            }
        })
    }

    /**
        绑定区域树下拉列表
        param {} control             #控件ID
        param {} bSelectFirstNode    是否选中绑定后的第一项
        returns {}
         */
    function bindAreaTree(control, bSelectFirstNode, onSuccess, onSelectFun) {
        bindCombotreeFromApi(
            control, //combotree-ID
            '/api/Info/GetAreas', //api
            'AreaCode', //data的ID字段
            'ParentCode',     //data的父ID字段
            'AreaName',//data中用于显示的Text字段
            onSelectFun, onSuccess, bSelectFirstNode
        );
    }

    function bindCombotreeFromApi(control, api, idField, pidFiled, textField, selectFun, onLoadSuccess, bSelectFirstNode, bLocal, bSync) {
        try {
            $.ajax({
                url: api,
                type: 'get',
                success: function (d) {
                    //var array = JSON.parse(d)
                    var array = eval(d.Data)
                    bindCombotreeFromData(control, array, idField, pidFiled, textField, selectFun, onLoadSuccess, bSelectFirstNode, bLocal);
                }
            });
        } catch (e) {
            alert(e.message);
        }
    }


    function bindCombotreeFromData(control, data, idField, pidFiled, textField, selectFun, onLoadSuccess, bSelectFirstNode, bLocal) {
        try {
            data = data || [];//避免data=null引起异常
            data = copyProperty(data, [idField, pidFiled, textField], ['id', 'pid', 'text'], true); //转化为easyui - tree需要的id属性
            if (bLocal && lan) { //本地化处理
                lan.localObjects(data, 'text');
            }
            data = toTreeData(data, "id", "pid", "children"); //转化为easyui-tree需要的json-tree格式
            //data = copyProperty(data, [  textField], [ 'text'], true); //转化为easyui - tree需要的id属性
            //data = toTreeData(data, idField, pidFiled, "children"); //转化为easyui-tree需要的json-tree格式

            $(control)
                .combotree({
                    data: data
                });

            if (typeof (selectFun) != 'undefined' && selectFun != null)
                $(control)
                    .combotree({
                        onSelect: selectFun
                    });
            if (typeof (onLoadSuccess) != 'undefined' && onLoadSuccess != null)
                $(control)
                    .combotree({
                        onLoadSuccess: onLoadSuccess
                    });
            if (bSelectFirstNode && data && data[0]) {
                var firstValue = data[0][idField];
                $(control).combotree("setValue", firstValue);
            }
        } catch (err) {
            alert(err.message);
        }
    }

    /*
    json格式转树状结构
    param   {json}      json数据
    param   {String}    id的字符串
    param   {String}    父id的字符串
    param   {String}    children的字符串
    */
    toTreeData = function (a, idStr, pidStr, childrenStr) {
        var r = [], hash = {}, len = (a || []).length;
        for (var i = 0; i < len; i++) {
            hash[a[i][idStr]] = a[i];
        }
        for (var j = 0; j < len; j++) {
            var aVal = a[j], hashVP = hash[aVal[pidStr]];
            if (hashVP) {
                !hashVP[childrenStr] && (hashVP[childrenStr] = []);
                hashVP[childrenStr].push(aVal);
            } else {
                r.push(aVal);
            }
        }
        return r;
    };

    copyProperty = function (obj, sourcePropertyName, newPropertyName, overWrite) {
        if (obj instanceof Array || Object.prototype.toString.call(obj) === "[object Array]") {
            for (var k in obj)
                copyProperty(obj[k], sourcePropertyName, newPropertyName);
        }
        else if (typeof obj === 'object') {
            if (sourcePropertyName instanceof Array || Object.prototype.toString.call(sourcePropertyName) === "[object Array]") {
                for (var i in sourcePropertyName) {
                    copyProperty(obj, sourcePropertyName[i], newPropertyName[i]);
                }
            }
            else if (typeof sourcePropertyName === 'string') {
                if ((obj[newPropertyName] && overWrite) || (!obj[newPropertyName]))
                    obj[newPropertyName] = obj[sourcePropertyName];
            }
        }
        return obj;
    };



</script>

